let mask=$('<div id="mask" class="mask" style="display: none;"></div>');//遮罩
let div=$('<div class="div"></div>');//交互内容
let title=$('<div class="title"></div>');//标题
	let tab1=$(`<span><img src="${window.extensionid}img/u58.png">同步原型</span>`);
		tab1.click(function(){
			seting.hide();
			enddiv.hide();
			upprd.show();
			treewin.empty();
			httpdata.fileList({folderPath:config.serverPath}).then(v=>{
				treewin.empty()
				let arr=v.data.map(d=>{return d.name})
				treewin.append(createTree(arr,config.serverPath+'/'))
			})
		})
	let tab2=$(`<span><img src="${window.extensionid}img/u61.png">设置</span>`);
		tab2.click(function(){
			upprd.hide();
			enddiv.hide();
			seting.show();
			initserver();
		})
		function initserver(){
			$('#serverip').val(config.server)
			httpdata.fileList({}).then(v=>{
				$('#serverurl').empty()
				config.serverPath=v.data[0].absolutePath
				v.data.forEach(item=>{
					$('#serverurl').append($(`<option value="${item.absolutePath}">${item.name}</option>`))
				})
				httpdata.fileList({folderPath:config.serverPath}).then(v=>{
					treewin.empty()
					let arr=v.data.map(d=>{return d.name})
					treewin.append(createTree(arr,config.serverPath+'/'))
				})
			})
		}
		initserver();
	let close=$(`<img src="${window.extensionid}img/u65.png" alt="" style="float: right;">`);
		close.click(function(){mask.hide()})
	title.append(tab1)
	title.append(tab2)
	title.append(close)
let message=$('<div id="message"></div>')
let upprd=$('<div id="upprd"></div>');
	let dirNew=$('<button>新建文件夹</button>')
		dirNew.click(function(){
			createDirectory()
		})
	let dirNewDown=$('<button>新建子文件夹</button>')
		dirNewDown.click(function(){
			createDirectory(true)
		})
		//创建文件夹
		function createDirectory(deep=false){
			let directoryName=prompt('请输入新建文件夹名称','')
			if(directoryName){
				config.pathHead=window.etarget?getPath():config.serverPath;
				let folderPath=config.pathHead;
				let el=window.etarget?window.etarget:$('#treewin');//未选中节点取根节点
				if(window.etarget&&!deep){
					folderPath=folderPath.split('/')
					folderPath.pop();
					folderPath=folderPath.join('/')
					el=$(el).parent()//取父节点
					if(el.localName!='ul'){
						el=$(el).parent()//取父节点
					}
				}
				httpdata.createDirectory({directoryName,folderPath}).then(v=>{
					if(v.data){
						let li='';
						let ultype=!$(el).children('ul').length
						if(ultype){
							li=createTree([`${directoryName}`],`${folderPath}/`)
						}else{
							el=$($(el).children('ul'))
							li=$(`<li data='${folderPath}/${directoryName}'><button class="open">🡇</button><span>${directoryName}</span></li>`)
						}
						$(el).append(li)
					}else sendMessage('创建失败')
				})
			}
		}
	let dirName=$('<button>重命名</button>')
		dirName.click(function(){
			let newName=prompt('请输入重新命名文件夹名称','')
			if(newName){
				let folderPath=getPath();
				folderPath=folderPath.split('/')
				let oldName=folderPath.pop();
				folderPath=folderPath.join('/')
				httpdata.renameDirectory({newName,folderPath,oldName}).then(v=>{
					if(v.data){
						$(window.etarget).attr('data',folderPath+'/'+newName)
						$($(window.etarget)[0].childNodes[1]).text(newName)
					}else sendMessage('重新命名失败')
				})
			}
		})
	let dirCopy=$('<button>复制地址</button>')
		dirCopy.click(function(){
			let str=getPath()
			str=str.split('/').splice(3).join('/')
			str=`https://${str}/index.html`
			copytext(str)
		})
		function copytext(text) {
			let rng = document.createElement('input');
			document.body.appendChild(rng);
			rng.value = text;
			rng.readOnly="readonly";
			rng.select();
			document.execCommand("Copy");
			document.body.removeChild(rng);
			sendMessage("复制成功!");
		}
	let treewin=$('<div id="treewin"></div>')
	let upfile=$('<div id="upfile" class="myAxhubBtn">立即同步</div>')
		upfile.click(function(){
			let pid=getPath();
			if(!pid){
				sendMessage('请选择上传目录')
				return;
			}
			httpdata.fileList({folderPath:pid}).then(v=>{
				let up=true;
				if(v.data.length){
					up=confirm('所选文件夹已有文件或文件夹，继续上传将会覆盖同名文件，是否继续上传？')
				}
				if(up){
					console.log('上传')
					config.getlist=true;
					window.toPage&&toPage();
				}
			})
		})
	upprd.append(dirNew)
	upprd.append(dirNewDown)
	upprd.append(dirName)
	upprd.append(dirCopy)
	upprd.append(treewin)
	upprd.append(upfile)
			
let seting=$('<div id="seting" style="display: none;"></div>');
	let saveserver=$('<div id="saveserver" class="myAxhubBtn">立即保存</div>')
	seting.append(`
		<div>
			<label>
				服务器：
			</label>
			<input type="text" id="serverip" value="" class="myAxhubInp"/>
		</div>
		<div>
			<label>
				网&nbsp;&nbsp;&nbsp;站：
			</label>
			<select id="serverurl" name="serverurl" class="myAxhubInp">
			</select>
		</div>
	`) 
	seting.append(saveserver)
	saveserver.click(function(){
		config.server=$('#serverip').val()
		localStorage.setItem('server',config.server)
		config.serverPath=$('#serverurl').val()
		sendMessage('信息保存成功，点击同步原型开始同步吧。')
		tab1.click()
	})
div.append(title)
let enddiv=$('<div id="enddiv" style="display: none;"></div>');
	enddiv.append($('<div>文件同步成功，马上去分享吧！</div>'))
	let urlshow=$('<input type="text" id="urlshow" value="" class="myAxhubInp" style="padding:0"/>')
	let urlcopy=$('<button>复制</button>')
		urlcopy.click(function(){
			let str=getPath()
			str=str.split('/').splice(3).join('/')
			str=`https://${str}/index.html`
			copytext(str)
		})
	let urlopen=$('<button>打开</button>')
		urlopen.click(function(){
			let str=getPath()
			str=str.split('/').splice(3).join('/')
			str=`https://${str}/index.html`
			window.open(str)
		})
	let goupprd=$('<div id="goupprd" class="myAxhubBtn">返回</div>')
		goupprd.click(function(){
			upfile.text('立即同步');
			enddiv.hide();
			upprd.show();
		})
	enddiv.append(urlshow)
	enddiv.append(urlcopy)
	enddiv.append(urlopen)
	enddiv.append(goupprd)
div.append(message)
div.append(upprd)
div.append(seting)
div.append(enddiv)
mask.append(div)
$('body').append($('<div id="myAxhub"></div>').append(mask))

//设置当前hover目录列
$("#mask").on('hover','li',function(e){
	e.stopPropagation()
	$(".hover").toggleClass("hover");
	$(e.target).toggleClass("hover");
});
//设置当前选中目录列
$("#mask").on('click','li',function(e){
	$(".cheack").toggleClass("cheack");
	$(e.target).toggleClass("cheack");
	//let pid=$(e.target).attr("data");
	window.etarget=e.target
	config.pathHead=getPath();
});
//展开目录获取
$("#mask").on('click','.open',function(e){
   e.stopPropagation()
   let parent=$(e.target).parent()
   let pid=$(parent).attr("data");
   httpdata.fileList({folderPath:pid}).then(v=>{
		//$(parent).empty()
		e.target.disabled=true;
		let arr=v.data.map(d=>{return d.name})
		$(parent).append(createTree(arr,pid+'/'))
   })
});
//创建文件夹树
function createTree(arr,pid){
	let ul=$('<ul></ul>')
	arr.forEach(v=>{
		ul.append($(`<li data='${pid+v}'><button class="open">🡇</button><span>${v}</span></li>`))
	})
	return ul;
}
//获取文件目录路径
function getPath(){
	if(!window.etarget)return '';
	return $(window.etarget).attr("data");
}
//小提示消息
function sendMessage(msg){
	$('#message').text(msg);
	$('#message').show();
	setTimeout(function(){
		$('#message').hide();
	},3000)
}
//创建按钮
function createBTN(){
	/* <img src="${window.extensionid}img/u58.png" style="width: 20px;height: 20px;"> */
	let li =$(`<li id="auxhub"><a pluginid="auxhub" href="#">同步</a></li>`)
	li.click(function(e){
		e.stopPropagation();
		alist_index=0;
		alist=Array.from($('#sitemapTreeContainer a.sitemapPageLink'));
	})
	$('#interfaceControlFrameHeader').append(li)
	$('#auxhub a').css('background',`url(${window.extensionid}img/u58.png) no-repeat center center,linear-gradient(transparent, transparent)`);
}
createBTN()

$("#auxhub").click(function(e){mask.show()})